<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.收集表单数据</title>
  </head>
  <style>
    form {
      width: 70%;
      margin: 0 auto;
      padding: 20px;
    }
  </style>
  <link rel="stylesheet" href="../public/dist/css/bootstrap.min.css">
  <!-- 
   总结：
   一.input类型为text时，v-model收集的是默认value的值
   二.input类型为radio时,v-model收集的是默认value的值
   三.input类型为checkbox时，
      3.1 当默认没有配置value值时，收集的是check的值(默认是布尔值，true或者false)
      3.2 当配置了value的值时，
           3.2.1 v-model 的值是非数组，那么checked的值(默认是布尔值，true或者false)
           3.2.2 v-model的值时数组,那么value收集的是value组成的数组
   四.当为下拉菜单时,把v-model放在select里
   五.当为文本域时,v-model收集的是默认value的值   
   六.当为多选框是否同意时，没有配置value，正好收集到是布尔值,true或者false
 -->

  <body>
    <form id="app">
      <div class="form-group">
        <label for="username">账号</label>
        <input type="text" class="form-control" id="username" placeholder="账号" v-model="username">
      </div>
      <div class="form-group">
        <label for="Password">密码</label>
        <input type="password" class="form-control" id="Password" placeholder="Password" v-model="password">
      </div>
      <!-- 单选框 -->
      <div class="form-group">
        <label for="sex">性别</label>
        <p id="sex">
          <input type="radio" name="sex" v-model="gender" value="male">男
          <input type="radio" name="sex" v-model="gender" value="female">女
        </p>
      </div>
      <!-- 多选框 -->
      <div class="form-group">
        <label for="hobby">爱好</label>
        <p id="hobby">
          <!-- <input type="checkbox" v-model="hobby">抽烟
          <input type="checkbox" v-model="hobby">喝酒
          <input type="checkbox" v-model="hobby">烫头 -->
          <input type="checkbox" v-model="hobby" value="smoke"> 抽烟
          <input type="checkbox" v-model="hobby" value="drink"> 喝酒
          <input type="checkbox" v-model="hobby" value="haircut"> 烫头
        </p>
      </div>
      <!-- 下拉菜单 -->
      <div class="form-group">
        <label for="area">校区</label>
        <select name="" id="area" v-model="area">
          <option value="">请选择校区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="guangzhou">广州</option>
          <option value="shenzhen">深圳</option>
        </select>
      </div>
      <!-- 文本框 -->
      <div class="form-group">
        <label for="text">文本域</label>
        <textarea class="form-control" rows="3" id="text" v-model="text"></textarea>
      </div>
      <div class="form-group">
        <label for="agreement">阅读并接受</label>
        <p id="agreement">
          <input type="checkbox" v-model="agreement"> <a
            href="http://www.baidu.com">同意协议</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </p>
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </form>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false;
    new Vue({
      el: "#app",
      data() {
        return {
          username: "",
          password: "",
          gender: "",
          // hobby: "",
          hobby: [],
          // 校区
          area: '',
          // 是否同意
          agreement: '',
          // 文本域
          text: '',
          // 是否同意
          agreement: ''
        }
      }
    })
  </script>

</html>